<!--
 * @description: 
 * @Author: vikingShip
 * @Date: 2021-12-08 16:35:42
 * @LastEditors: vikingShip
 * @LastEditTime: 2021-12-09 09:57:31
-->
<template>
    <view :class="[value?'choosed':'radio']" @click="chooseHandle" ref="radioRef">
        <u-icon name="checkbox-mark" color="#fff" size="16" v-if="value"></u-icon>
    </view>
</template>
<script lang='ts'>
import { Component, Vue,Prop,Ref } from 'vue-property-decorator'

@Component
export default class CusRadio extends Vue {
    @Prop()
    value:boolean
    @Prop()
    index:number
    chooseHandle(){
        this.$emit("change",{index:this.index})
    }
}
</script>
<style lang="scss" scoped>
    .radio{
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        border: 1rpx solid;
        border-color:#c8c9cc;
    }
    .choosed{
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        background: #FF4444;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>